<template>
    <div class="center">
        <el-tabs class="demo-tabs" v-model="activeName">
            <!-- 商品信息 -->
            <el-tab-pane label="商品信息" name="first">
                 <!-- 搜索 -->
                 <div class="top">
                    <input placeholder="请输入商品名称" v-model="shoppname"></input>
                    <input placeholder="请输入商家名称" v-model="shopname"></input>
                    <input placeholder="请输入品牌名称" v-model="barand">
                    <button @click="comclik"><img src="../assets/Desktop/图标/搜索.png" alt=""></button>
                </div>
                <div class="box1">
                    <el-table :data="comlist" style="width: 100%">
                        <el-table-column prop="goodsName" label="商品名称" width="95" />
                        <el-table-column prop="price" label="价格" width="70" />
                        <el-table-column prop="todayPrice" label="现有价格" width="95"/>
                        <el-table-column prop="discount" label="折扣" width="70" />
                        <el-table-column prop="shopName" label="所属商家" width="155"/>
                        <el-table-column width="100" prop="businessName">
                            <template #header>
                                <select @change="handleChange">
                                    <option value="">商品类别</option>
                                    <option v-for="item in xinlist" :value="item.businessId">{{item.businessName}}</option>
                                </select>
                            </template>
                        </el-table-column>
                        <el-table-column width="95" style="text-align: center;">
                            <template #header>
                                <select @change="offchange">
                                    <option value="">是否下架</option>
                                    <option value="0">是</option>
                                    <option value="1">否</option>
                                </select>
                            </template>
                            <template #default="scope">
                               {{comFn (scope.row.whetherUpOrDrown) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="number" label="库存" width="70"/>
                         <el-table-column prop="pageView" label="浏览量" width="95"/>
                         <el-table-column prop="goodsHot" label="热门推荐" width="95">
                            <template #default="scoped">
                                 <el-switch v-model="scoped.row.goodsHot" @input="switchchange(scoped.row.goodsId,$event)"></el-switch>
                            </template>
                         </el-table-column>
                         <el-table-column prop="brandName" label="商品品牌" width="95"/>
                     </el-table>
                     <div class="foot">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="pageSize"
                            :page-count="total"
                            @current-change="pageChange"/>
                     </div>
                </div>
            </el-tab-pane>
            <!-- 订单信息 -->
            <el-tab-pane label="订单信息" name="second">
                  <!-- 搜索 -->
                  <div class="top">
                    <input placeholder="请输入商品名称" v-model="proname"></input>
                    <input placeholder="请输入订单编号" v-model="pronumber"></input>
                    <input placeholder="请选择开始时间" type="datetime-local" v-model="prostud"></input>
                    <input placeholder="请选择结束时间" type="datetime-local" v-model="proend"></input>
                    <button @click="proclick"><img src="../assets/Desktop/图标/搜索.png" alt=""></button>
                </div>
                <div class="box">
                    <el-table :data="productlist" style="width: 100%">
                        <el-table-column prop="goodsName" label="商品名称" width="90" />
                        <el-table-column prop="orderNumber" label="订单编号" width="90" />
                        <el-table-column prop="userName" label="用户" width="90"/>
                        <el-table-column prop="orderTime" label="下单时间" width="180"/>
                        <el-table-column prop="payTime" label="支付时间" width="180"/>
                        <el-table-column prop="platName" label="支付方式" width="90"/>
                        <el-table-column prop="pay" label="应付金额" width="90" />
                        <el-table-column prop="realPay" label="实付金额" width="90"/>
                         <el-table-column>
                            <template #header>
                                <select id="sel" @change="payment">
                                    <option value="全部">全部</option>
                                    <option value="2">已支付</option>
                                    <option value="5">已完成</option>
                                    <option value="4">待收货</option>
                                    <option value="3">待发货</option>
                                    <option value="1">待支付</option>
                                </select>
                            </template>
                            <template #default="scope" >
                                 <p :style="{color:scope.row.status=='2'||scope.row.status=='5'? '#81f56c':'#f40026'}"> 
                                    {{ statusFn(scope.row.status) }}
                                </p>
                            </template>
                         </el-table-column>
                     </el-table>
                     <div class="foot">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total1"
                            :page-size="pageSize"
                            :page-count="total1"
                            @current-change="pageChange1"/>
                     </div>
                </div>
            </el-tab-pane>
            <!-- 退货信息 -->
            <el-tab-pane label="退货信息" name="third">
                <div class="top">
                    <input placeholder="请输入商品名称" v-model="returnname"></input>
                    <input placeholder="请输入商家名称" v-model="returnshipp"></input>
                    <input placeholder="请输入订单编号" v-model="retrunorder">
                    <button @click="returnclick"><img src="../assets/Desktop/图标/搜索.png" alt=""></button>
                </div> 
                <div class="box">
                    <el-table :data="returnlist" style="width: 100%">
                        <el-table-column prop="goodsName" label="商品名称" width="120" />
                        <el-table-column prop="orderNumber" label="订单编号" width="120" />
                        <el-table-column prop="shopName" label="商家" width="160"/>
                        <el-table-column prop="reason" label="退货原因" width="120" />
                        <el-table-column prop="userName" label="用户" width="120"/>
                        <el-table-column width="120">
                            <template #header>
                                <select id="sel" @change="returnsele">
                                    <option value="退款状态">退款状态</option>
                                    <option value="0">提交信息</option>
                                    <option value="1">平台审核</option>
                                    <option value="2">商家同意</option>
                                    <option value="3">正在退货</option>
                                    <option value="4">完成</option>
                                </select>
                            </template>
                            <template #default="scoped">
                                 {{ returnFn(scoped.row.returnStatus)}}
                            </template>
                         </el-table-column>
                        <el-table-column prop="realPay" label="金额" width="120" />
                        <el-table-column prop="address" label="操作" width="120">
                            <template #default="scoped">
                                <button @click="open(scoped.row.returnId,$event)" class="open">通过</button>
                                <button class="noopen" @click="noopen(scoped.row,$event)">不通过</button>
                            </template>
                        </el-table-column>
                     </el-table>
                     <div class="foot">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total2"
                            :page-size="pageSize"
                            :page-count="total2"
                            @current-change="pageChange2"/>
                     </div>
                </div>
                <!-- 不通过模态框 -->
                <el-dialog v-model="openmofi" title="不通过">
                            <div class="delbox2">
                                <input type="text" placeholder="在此输入不通过的理由" v-model="noadop">
                            </div>
                            <div class="footer2">
                                <button class="prese1 prese" @click="preserv">保存</button>
                                <button class="prese1" @click="noprese">取消</button>
                            </div>
                     </el-dialog>
            </el-tab-pane>
            <!-- 发货信息 -->
            <el-tab-pane label="发货信息" name="fourth">
                <div class="top">
                    <input placeholder="请输入商品名称" v-model="shippname"></input>
                    <input placeholder="请输入订单编号" v-model="ordername"></input>
                    <input placeholder="请选择开始时间"  v-model="dataStudt" type="datetime-local"></input>
                    <input placeholder="请选择结束时间" v-model="dataend" type="datetime-local"></input>
                    <input placeholder="请输入用户名" v-model="usernames">
                    <button @click="shipclick"><img src="../assets/Desktop/图标/搜索.png" alt=""></button>
                </div>
                <div class="box">
                    <el-table :data="shipplist" style="width: 100%">
                        <el-table-column prop="goodsName" label="商品名称" width="90" />
                        <el-table-column prop="orderNumber" label="订单编号" width="90" />
                        <el-table-column prop="orderTime" label="下单时间" width="160"/>
                        <el-table-column prop="track" label="物流单号" width="140" />
                        <el-table-column prop="firm" label="物流公司" width="90"/>
                        <el-table-column prop="userName" label="用户" width="90"/>
                        <el-table-column prop="contacts" label="联系人" width="90" />
                        <el-table-column prop="tel" label="联系方式" width="145"/>
                        <el-table-column prop="address" label="状态" width="90">
                            <template #default="scope">
                               {{ shippFu(scope.row.status)}}
                            </template>
                        </el-table-column>
                     </el-table>
                     <div class="foot">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total3"
                            :page-size="pageSize"
                            :page-count="total3"
                            @current-change="pageChange3"/>
                     </div>
                </div>
            </el-tab-pane>
            <!-- 商品评价 -->
            <el-tab-pane label="商品评价" name="fifth">
                <div class="top">
                    <input placeholder="请输入商品名称" v-model="contentname"></input>
                    <input placeholder="请输入订单编号" v-model="contentorder"></input>
                    <input placeholder="请选择开始时间" v-model="contentstut" ></input>
                    <input placeholder="请选择结束时间" v-model="contentend"></input>
                    <button @click="contentclick"><img src="../assets/Desktop/图标/搜索.png" alt=""></button>
                </div>
                <div class="box">
                    <el-table :data="evaluatelist" style="width: 100%">
                        <el-table-column prop="goodsName" label="商品名称" width="200" />
                        <el-table-column prop="userName" label="评价用户" width="200" />
                        <el-table-column prop="content" label="评价内容" width="200"/>
                        <el-table-column prop="contentTime" label="评价时间" width="200" />
                        <el-table-column prop="start" label="星级" width="200">
                            <template #default="scope">
                                {{ scope.row.start }}星
                            </template>
                        </el-table-column>
                     </el-table>
                     <div class="foot">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total4"
                            :page-size="pageSize"
                            :page-count="total4"
                            @current-change="pageChange4"/>
                     </div>
                </div>
            </el-tab-pane>
            <!-- 商品分类 -->
            <el-tab-pane label="商品分类" name="sixth">
                 <div class="classfi">
                    <button class="classfi-but" @click="addtofi=true">+添加</button>
                 </div>
                 <div class="classbox">
                    <div class="classbox1" v-for="item in classlist">
                        <p>{{ item.typeName }}</p>
                        <p v-for="items in item.goodsTypeList" style="font-size: 12px; color: #818181;">{{ items.typeName }}</p>
                        <span class="modify" @click="modimo(item)">修改</span>
                        <span class="del" @click="models(item)">删除</span>
                    </div>
                    <div class="foot">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total5"
                            :page-size="pageSize1"
                            :page-count="total5"
                            @current-change="pageChange5"/>
                     </div>
                 </div>
                 <!-- 删除的模态框 -->
                 <el-dialog v-model="delmodel" title="删除">
                    <div class="delbox">
                        <span>一级分类</span>
                        <input type="text" placeholder="可直接进行修改">
                    </div>
                    <div class="delbox1" v-for="item in classlist1">
                        <span>二级分类</span>
                        <input type="text" placeholder="可直接进行修改" v-model="item.typeName">
                        <button @click="delsone(item.typeId)">删除</button>
                    </div>
                    <div class="footer">
                        <button class="prese1 prese" @click="presedel">保存</button>
                        <button class="prese1" @click="cancel">取消</button>
                        <button class="prese2" @click="alldel">删除整个分类</button>
                    </div>
                </el-dialog>
                <!-- 修改的模态框 -->
                <el-dialog v-model="modemofi" title="修改">
                    <div class="delbox">
                        <span>一级分类</span>
                        <input type="text" placeholder="可直接进行修改" v-model="onemo.typeName">
                    </div>
                    <div class="delbox1" v-for="item in classlist1">
                        <span>二级分类</span>
                        <input type="text" v-model="item.typeName" placeholder="可直接进行修改" @input="changeitem(item)">
                    </div>
                    <div class="footer2">
                        <button class="prese1 prese" @click="presemove">保存</button>
                        <button class="prese1" @click="cancel1">取消</button>
                    </div>
                </el-dialog>
                <!-- 添加的模态框 -->
                <el-dialog v-model="addtofi" title="添加分类">
                    <div class="delbox">
                        <span>一级分类</span>
                        <input type="text" placeholder="请输入一级分类的名称" v-model="oneadd">
                    </div>
                    <div class="delbox1" v-for="item in inputlist">
                        <span>二级分类</span>
                        <input type="text" v-model="item.typeName" placeholder="请输入二级分类的名称" @input="changeitem(item)">
                        <button @click="addbut">+</button>
                    </div>
                    <div class="footer2">
                        <button class="prese1 prese" @click="addprese">保存</button>
                        <button class="prese1" @click="cancel1">取消</button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <!-- 品牌管理 -->
            <!-- <el-tab-pane label="品牌管理" name="seventh">Task</el-tab-pane> -->
        </el-tabs>
       
    </div>
</template>

<script setup>
   import { reactive,ref,getCurrentInstance, onMounted } from 'vue';
   import axioes from 'axios';
   import { ElMessage, ElMessageBox } from 'element-plus'
   //弹模态框
 
   var axios=getCurrentInstance();
   var url="http://192.168.199.11:8001/ShoppingStreet"
  let token=localStorage.getItem("token");
//   console.log(token);
  //默认是第一个
  const activeName = ref('first')
  

  //商品信息列表渲染   
  let comlist=ref([]);
 function comList(){
    let  data={
                pageIndex:currentPage.value,
                pageSize:pageSize,
            }
            axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/goods/goodsList",data).then(function(res){
           comlist.value=res.data.data.oeders;
           if(res.data.data.pageCount!=0){
            total.value=res.data.data.pageCount;
           }
     })
 }
 function switchchange(goodsid,event){
    if(event==true){
        let  data={
              goodsHot:1,
              goodsId:goodsid,
            }
            axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/goods/openOff",data).then(function(res){
        ElMessage({
            message: '推荐成功',
            type: 'success',
        })
     })
    }
 }
//  分页
    let pageSize = 7;
    let currentPage = ref(1);
    let total = ref(1);
    const pageChange = (newPage) => {
        currentPage.value = newPage;
        comList();
    };
    let currentPage1 = ref(1);
    let total1 = ref(1);
    const pageChange1 = (newPage) => {
        currentPage1.value = newPage;
        productList();
    };
    let currentPage2 = ref(1);
    let total2 = ref(1);
    const pageChange2 = (newPage) => {
        currentPage2.value = newPage;
        returnList();
    };
    let currentPage3 = ref(1);
    let total3 = ref(1);
    const pageChange3 = (newPage) => {
        currentPage3.value = newPage;
        shippList();
    };
    let currentPage4 = ref(1);
    let total4 = ref(1);
    const pageChange4 = (newPage) => {
        currentPage4.value = newPage;
        evaluateList();
    };
    let currentPage5 = ref(1);
    let total5 = ref(1);
    let pageSize1 = 5;
    const pageChange5 = (newPage) => {
        currentPage5.value = newPage;
        classList();
    };
 //商品信息类别
 let xinlist=ref([]);
 function xinList(){
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/shop/businessList",{}).then(function(res){
           xinlist.value=res.data.data;
             })
 }
 //商品类别信息搜索
function handleChange(event){
    const selectedValue = event.target.value;
    axioes.defaults.headers.common['token'] = token;
    var data={
        businessId:Number(selectedValue),
        pageIndex:currentPage.value,
        pageSize:pageSize
    }
     axios.proxy.$http.post(url+"/goods/searchBrand",data).then(function(res){
           comlist.value=res.data.data.oeders;
           if(res.data.data.pageCount!=0){
            total.value=res.data.data.pageCount;
           }
     })
}
 //是否下架搜索接口渲染
 function offchange(event){
    let offvalue=event.target.value;
    axioes.defaults.headers.common['token'] = token;
    var data={
        whetherUpOrDrown:offvalue,
        pageIndex:currentPage.value,
        pageSize:pageSize
    }
     axios.proxy.$http.post(url+"/goods/outDelflag",data).then(function(res){
           comlist.value=res.data.oeders;
           total.value=res.data.data.pageCount;
     })
 }
//  判断
 let comFn=(whetherUpOrDrown)=>{
    if(whetherUpOrDrown=="1"){
         return "是"
    }else if(whetherUpOrDrown=="0"){
           return "否"
    }
 }
  
  //搜索商品名称信息列表渲染
  let shopname=ref("");
  let shoppname=ref("");
  let barand=ref("");
  function comclik(){
    let  data={
                pageIndex:currentPage.value,
                pageSize:pageSize,
                goodsName:shoppname.value,
                shopName:shopname.value,
                brandName:barand.value,
            }
            axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/goods/searchGoods",data).then(function(res){
        comlist.value=res.data.data.oeders;
        if(res.data.data.pageCount!=0){
            total.value=res.data.data.pageCount;
           }
     })
  }
  
  //订单信息渲染
  var productlist=ref([])
  function productList(){
          let  data={
                pageIndex:currentPage1.value,
                pageSize:pageSize,
            }
            axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/ordersList",data).then(function(res){
           productlist.value=res.data.data.ordersList;
           if(res.data.data.pageCount!=0){
            total1.value=res.data.data.pageCount;
           }
     })
  }
  //订单信息搜索渲染
  let proname=ref("");
  let pronumber=ref("");
  let prostud=ref("");
  let proend=ref("");
  function proclick(){
    let data={
        goodsName:proname.value,
        orderNumber:pronumber.value,
        statrTime:prostud.value,
        endTime:proend.value,
        pageIndex:currentPage1.value,
        pageSize:pageSize,
    }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/searchOrder",data).then(function(res){
           productlist.value=res.data.data.ordersList;
           if(res.data.data.pageCount!=0){
            total1.value=res.data.data.pageCount;
           }
     })
  }
  //支付状态列表
  function payment(event){
    var prostatus=event.target.value;
     let data={
        pageIndex:currentPage1.value,
        pageSize:pageSize,
        status:Number(prostatus),
     }
     axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/ordersPay",data).then(function(res){
           productlist.value=res.data.data.ordersList;
           if(res.data.data.pageCount!=0){
            total1.value=res.data.data.pageCount;
           }
     })
  }
//判断状态
const statusFn=(status)=>{
     if(status=="1"){
        return "待支付"
    }else if(status=="2"){
        return "已支付"
    }else if(status=="3"){
        return "待发货"
    }else if(status=="4"){
        return "待收货"
    }else if(status=="5"){
        return "已完成"
    }
  }
  //退货信息列表渲染
  let returnlist=ref([]);
  function returnList(){
    let data={
        pageIndex:currentPage2.value,
        pageSize:pageSize,
    }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/Return",data).then(function(res){
         returnlist.value=res.data.data.ReturnList;
         if(res.data.data.pageCount!=0){
            total2.value=res.data.data.pageCount;
         }
     })
  }
  //判断
  function returnFn(returnStatus){
      if(returnStatus=="0"){
            return "提交信息"
      }else if(returnStatus=="1"){
        return "平台审核"
      }else if(returnStatus=="2"){
           return "商家同意"
      }else if(returnStatus=="3"){
           return "正在退货"
      }else{
         return "完成"
      }
  }
  //退货信息搜索列表渲染
  let returnname=ref("");
  let returnshipp=ref("");
  let retrunorder=ref("");
  function returnclick(){
    let data={
        pageIndex:currentPage2.value,
        pageSize:pageSize,
        goodsName:returnname.value,
        shopName:returnshipp.value,
     }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/Return",data).then(function(res){
         returnlist.value=res.data.data.ReturnList;
         if(res.data.data.pageCount!=0){
            total2.value=res.data.data.pageCount;
         }
     })
  }


  // 退货状态搜索
  function returnsele(event){
       var returnev=event.target.value;
       let data={
        pageIndex:currentPage2.value,
        pageSize:pageSize,
        returnStatus:returnev,
    }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/Return",data).then(function(res){
         returnlist.value=res.data.data.ReturnList;
         if(res.data.data.pageCount!=0){
            total2.value=res.data.data.pageCount;
         }
     })
  }
  // 退货状态中的通过不通过
  let openvalue=ref("");
  let noopenvalue=ref("");
  let prompt=ref("");
//   通过
  function open(item,event){
       openvalue.value=event.target;
       noopenvalue.value=event.target.nextSibling;
       prompt.value=event.target.parentNode;
       
       let data={
        returnId:item,
        delflag:1,
    }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/updateRSa",data).then(function(res){
          ElMessage({
            message: '通过成功',
            type: 'success',
        })
        openvalue.value.style.color="#ccc";
        noopenvalue.value.style.display="none";
        prompt.value.style.textAlign="center";
        openvalue.value.disabled=true;
    
     })
  }  
  let openmofi=ref(false);
  let returnid=ref();
  let qqem=ref();
//   不通过
  function noopen(item,event){
     openmofi.value=true;
     console.log(item);
     returnid.value=item.returnId;
     qqem.value=item.email;
     noopenvalue.value=event.target;
     openvalue.value=event.target.previousSibling
     let data={
        returnId:returnid.value,
        delflag:0,
    }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/updateRSa",data).then(function(res){
            noopenvalue.value.style.color="#ccc"
            openvalue.value.style.display="none"
            noopenvalue.value.disabled=true;
     })
  }
//   不通过理由
let noadop=ref("");
function preserv(){
    let data={
        returnId:returnid.value,
        reason:noadop.value,
        email:qqem.value
    }
    axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/orders/updateRSr",data).then(function(res){
        ElMessage({
            message: '提交成功',
            type: 'success',
        })
        openmofi.value=false;
     })
}
// 取消
function noprese(){
    openmofi.value=false;
}
  //发货信息列表渲染
  let shipplist=ref([]);
  function shippList(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        pageIndex:currentPage3.value,
        pageSize:pageSize,
    }
     axios.proxy.$http.post(url+"/orders/informationList",data).then(function(res){
        shipplist.value=res.data.data.informationList;
        if(res.data.data.pageCount!=0){
            total3.value=res.data.data.pageCount;
        }
     }) 
  }


//  判断
function shippFu(status){
    if(status=="1"){
         return "待支付"
    }else if(status=="2"){
        return "已支付"
    }else if(status=="3"){
        return "待发货"
    }else if(status=="4"){
        return "已发货"
    }else if(status=="5"){
         return "已完成"
    }
}

//发货信息列表搜索
let shippname=ref("");
let ordername=ref("");
let dataStudt=ref("");
let dataend=ref("");
let  usernames=ref("");
function shipclick(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        pageIndex:currentPage3.value,
        pageSize:pageSize,
        goodsName:shippname.value,
        orderNumber:ordername.value,
        statrTime:dataStudt.value,
        endTime:dataend.value,
        userName:usernames.value,
    }
     axios.proxy.$http.post(url+"/orders/informationSearch",data).then(function(res){
        shipplist.value=res.data.data.informationSearch;
        if(res.data.data.pageCount!=0){
            total3.value=res.data.data.pageCount;
        }
     }) 

}


//商品评价列表渲染
let evaluatelist=ref([]);
function evaluateList(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        pageIndex:currentPage4.value,
        pageSize:pageSize,
    }
     axios.proxy.$http.post(url+"/comment/commentList",data).then(function(res){
        evaluatelist.value=res.data.data.commentList;
        if(res.data.data.pageCount!=0){
            total4.value=res.data.data.pageCount;
        }
     }) 
}


//商品评级搜索
let contentname=ref("");
let contentorder=ref("");
let contentstut=ref("");
let contentend=ref("");
function contentclick(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        pageIndex:currentPage4.value,
        pageSize:pageSize,
        goodsName:contentname.value,
        userName:contentorder.value,
        statrTime:contentstut.value,
        endTime:contentend.value,
    }
     axios.proxy.$http.post(url+"/comment/searchComment",data).then(function(res){
        evaluatelist.value=res.data.data.searchList;
        if(res.data.data.pageCount!=0){
            total4.value=res.data.data.pageCount;
        }
     }) 
}


//商品分类列表渲染
let classlist=ref([]);
let classlist1=ref([]);
function classList(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        pageIndex:currentPage5.value,
        pageSize:pageSize1,
    }
     axios.proxy.$http.post(url+"/goodsType/goodsTypeList",data).then(function(res){
        classlist.value=res.data.data.goodsTypeList;
        if(res.data.data.pageCount!=0){
            total5.value=res.data.data.pageCount;
        }
     }) 
}


// 添加模态框
let addtofi=ref(false);
let inputlist=ref([{}]);
let oneadd=ref("");
function addbut() {
      inputlist.value.push({ typeName: '' });
    }
// 添加模态框中的保存
function addprese(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        typeName:oneadd.value,
        typeName1:inputlist.value,
    }
     axios.proxy.$http.post(url+"/goodsType/addGoodTypes",data).then(function(res){
        classList();
        addtofi.value=false
     }) 
}
// 商品分类列表的删除模态框
let delmodel=ref(false);
let alldels=ref("");

function models(item){
    delmodel.value=true;
    classlist1.value=item.goodsTypeList;
    alldels.value=item.typeId;
}
//关闭模态框
function cancel(){
    delmodel.value=false;
}
function cancel1(){
    addtofi.value=false;
}
//删除一级分类
function alldel(){
    axioes.defaults.headers.common['token'] = token;
    //询问是否删除模态框
    ElMessageBox.confirm(
    '是否删除？',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      var delflag=1
       var data={
            typeId:Number(alldels.value),
            delflag:delflag,
        }
         axios.proxy.$http.post(url+"/goodsType/deleteFirst",data).then(function(res){
            classList();
            delmodel.value=false;
         }) 
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
     var delflag=0
     var data={
            typeId:Number(alldels.value),
            delflag:delflag,
        }
         axios.proxy.$http.post(url+"/goodsType/deleteFirst",data).then(function(res){
            classList();
            delmodel.value=false;
         }) 
    })
   
}
//删除二级分类
function delsone(typeId){
 ElMessageBox.confirm(
    '是否删除？',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      var delflag=1
       var data={
            typeId:Number(typeId),
            delflag:delflag,
        }
         axios.proxy.$http.post(url+"/goodsType/deleteSecond",data).then(function(res){
            classList();
         }) 
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
     var delflag=0
     var data={
            typeId:Number(typeId),
            delflag:delflag,
        }
         axios.proxy.$http.post(url+"/goodsType/deleteSecond",data).then(function(res){
            classList();
         }) 
    })
}
function presedel(){
    delmodel.value=false;
}
//修改
let modemofi=ref(false)
let onemo=ref("");
function modimo(item){
    onemo.value=item;
    modemofi.value=true;
    classlist1.value=item.goodsTypeList;
}
//input改变时
var changes=ref([]);
function changeitem(item){
    changes.value.push(item);
}
function presemove(){
    axioes.defaults.headers.common['token'] = token;
    var data={
        typeName:onemo.value.typeName,
        typeId:onemo.value.typeId,
        typeName2:changes.value,
    }
     axios.proxy.$http.post(url+"/goodsType/updateGoodsType",data).then(function(res){
        classList();
        modemofi.value=false;
     }) 
}
   onMounted(function(){
       productList();
       comList();
       xinList();
       returnList();
       shippList();
       evaluateList();
       classList();
   })
</script>

<style lang="less" scoped>
   *{
    margin: 0;
    padding: 0;
   }
   .center{
     width: 100%;
     height: 100%;
     background: #f5f5f5;
     :deep(.el-tabs__nav-scroll){
            padding-left: 30px;
            background-color: #fff;
        }
     :deep( .el-tabs__header){
        background-color: #fff;
        }
       :deep(.el-tabs--left .el-tabs__active-bar.is-left){
            left: 10px;
        }
        :deep(.el-tabs__nav-wrap::after) {
        position: static !important;
        }
        :deep(.el-tabs__item.is-active, .el-tabs__item):hover{
            color:#000;
        }
        .top{
            width:90%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            input{
                width:15%;
                height: 50%;
                border:none;
                border-radius: 3px;
                margin-left: 2%;
                box-shadow: 0 1px 10px #ccc;
                padding-left: 20px;
            }
            button{
                width: 30px;
                height: 30px;
                background: #5883df;
                border-radius: 3px;
                border:none;
                margin-left: 1%;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
          
        }
     .box{
        width: 90%;
        height: 470px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 1px 1px 10px #ccc;
        position: relative;
        :deep(.cell){
            text-align: center;
            color: #000;
            font-weight: 400;
        }
        select{
               border: none;
            }
            .foot{
            width: 90%;
            height: 10%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 15px;
        }
       :deep( .el-pagination){
            justify-content: center;
        }
     }
     .box1{
        width: 90%;
        height: 470px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 1px 1px 10px #ccc;
        position: relative;
        :deep(.cell){
            color: #000;
            font-weight: 400;
            text-align: center;
        }
        select{
               border: none;
            }
            .foot{
            width: 90%;
            height: 10%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 15px;
        }
        .el-pagination{
            justify-content: center;
        }
     }
   }
   .el-table {
        --el-table-border-color: none;
        --el-table-border:none
    }
   .classfi{
    width: 100%;
    height: 50px;
    text-align: right;
    .classfi-but{
         width: 10%;
         height: 40px;
         border-radius: 8px;
         background-color: #5883df;
         color:#fff;
         border:none;
         margin-right: 8%;
    }
   }
   .classbox{
    width: 84%;
    height: 470px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    // overflow: auto;
    position: relative;
        .classbox1{
            width:19%;
            height: 240px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 1px 1px 10px #ccc;
            position: relative;
            margin-top:20px;
            margin-left:8px;
            p{
                margin-left: 10px;
            }
            p:first-child {
                margin: 10px;
            }
            .modify{
                font-size: 12px;
                position: absolute;
                bottom: 10px;
                right:22%;
                color:rgb(159, 247, 143);
            }
            .del{
                font-size: 12px;
                position: absolute;
                bottom: 10px;
                right: 5%;
                color: rgb(244, 65, 87);
            }
        }
        .foot{
            width: 90%;
            height: 10%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 15px;
        }
       :deep( .el-pagination){
            justify-content: center;
        }
   }
   :deep(.el-dialog__header.show-close){
    text-align: center;
   }
   :deep(.el-dialog ){
    --el-dialog-width: 30%;
    --el-border-radius-base: 0px;
    .delbox{
        width: 80%;
        height: 50px;
        margin: 0 auto;
        color: #000;
        span{
            margin-right: 5%;
            color:#000;
        }
        input{
            width:70%;
            height: 25px;
            border: none;
            background: #f4f4f4;
            padding-left: 10px;
        }
    }
    .delbox1{
        width: 80%;
        height: 50px;
        margin: 0 auto;
        color: #000;
        span{
            margin-right: 5%;
            color:#000;
        }
        input{
            width:55%;
            height: 25px;
            border: none;
            background: #f4f4f4;
            padding-left: 10px;
        }
        button{
            width: 13%;
            height: 25px;
            margin-left: 2%;
            border:none;
            background:#f4f4f4;
            color: red;
        }
    }
}
.footer{
    width: 80%;
    height: 80px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
}

.prese1{
    width:25%;
    height: 30px;
    border:none;
    border-radius:5px;
    background: #ccc;
    color:#fff;
    margin-left: 10px;
}
.prese2{
    width:38%;
    height: 30px;
    border:none;
    border-radius:5px;
    background: #ccc;
    margin-left: 10px;
    color:#fff;
}
.prese{
    background-color: #5883df;
    color: #fff;
}
:deep(.el-scrollbar ){
    font-size: 12px;
}
.noopen{
    color: #f44157;
    border:none;
    background: #fff;
}
.open{
    margin-right: 10px; color: #9ff78f;
    border:none;
    background: #fff;
}
.delbox2{
        width: 62%;
        height: 50px;
        margin: 0 auto;
        color: #000;
        input{
            width:100%;
            height: 35px;
            border: none;
            background: #d5d5d5;
            padding-left: 10px;
        }
}
.footer2{
            width: 70%;
            height: 80px;
            margin:0 auto;
            display: flex;
            justify-content: space-around;
        }
        
</style>